import React, { useState } from 'react'
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { Input, Button, message, Form } from 'antd';
import '../css/login_index.less'
import '../../../assets/icon/font_4845297_w692z3izwm/iconfont.css'
import { sendMsg, changePassword } from '../../../api/csy/api'
import Yzmcode from './yzmcode'
interface Props {
    changeShow: (val: number) => void
}

const Register: React.FC<Props> = ({ changeShow }) => {

    const [phone, setPhone] = useState('')
    const [password, setPassword] = useState('')
    const [codes, setCodes] = useState('')

    // 获取的验证码
    const [code, setCode] = useState('')
    const [num, setNum] = useState(5)

    const sendCode1 = () => {
        if (phone === '') {
            alert('请输入手机号');
        } else {
            sendMsg({ phone }).then(res => {
                console.log(res);

                if (res.data.code === 200) {
                    setCode(res.data.data);  // 设置验证码
                    setNum(5);  // 重置倒计时
                }
                // 开始倒计时
                const timer = setInterval(() => {
                    setNum((prev) => {
                        if (prev === 1) {  // 在倒计时到0时清除定时器
                            clearInterval(timer);
                            return 5;  // 重置num为5
                        }
                        return prev - 1;
                    });
                }, 1000);
            });
        }
    };

    // 注册用户
    const regiSter = () => {
        if (phone == '' || password == '' || code == '') {
            alert('请输入完整信息')
        } else {
            if (code == codes) {
                changePassword({ phone, password }).then(res => {
                    if (res.data.code == 200) {
                        message.success('修改成功');
                        changeShow(0)
                        sessionStorage.setItem('phone', phone)
                    }
                })
            } else {
                alert('验证码错误')
            }
        }
    }

    const dianji = (val: number) => {
        changeShow(val)
    }

    // 密码验证规则
    const passwordRules = [
        { required: true, message: '请输入密码' },
        { pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*])/, message: '密码必须包含字母、数字和特殊字符' },
    ];

    return (
        <div className='login_box_right'>
            <div className='login_box_right_title'>
                <p>修改密码</p>
            </div>
            <div className='denbox'>
                <Form onFinish={regiSter}>
                    <Form.Item
                        name="phone"
                        rules={[{ required: true, message: '请输入手机号' },
                        { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号' },
                        ]}
                    >
                        <Input size="large" value={phone}
                            onChange={(e) => setPhone(e.target.value)}
                            // className='login_box_right_input'
                            style={{ width: '90%' }}
                            placeholder="请输入账号" prefix={<UserOutlined />} />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={passwordRules}
                    >
                        <Input.Password size="large"
                            value={password} onChange={(e) => setPassword(e.target.value)}
                            // className='login_box_right_input'
                            style={{ width: '90%' }}
                            placeholder="请输入密码" prefix={<LockOutlined />} />
                    </Form.Item>
                    <Yzmcode></Yzmcode>
                    <Form.Item
                        style={{marginTop:'-5px'}}
                        name="code"
                        rules={[{ required: true, message: '请输入验证码' }]}
                    >
                        <Input size="large" value={codes}
                            onChange={(e) => setCodes(e.target.value)}
                            className='_input'
                            placeholder="请输入验证码" />
                        {
                            num === 5 ? <button onClick={sendCode1} className='btncode'>验证码</button> : <span className='dspan'>{num}</span>
                        }

                    </Form.Item>
                        

                    <Button htmlType="submit"
                        className='login_box_right_button'
                        type="primary" block>
                        修改密码
                    </Button>
                </Form>

                <div className='box_right_span'>
                    <span className='login_box_right_span' onClick={() => dianji(0)}>立即登录</span>
                </div>
            </div>
        </div>
    )
}

export default Register;
